<!-- 护理项目列表页 -->
<template>
     <div class="min-h serveProject bg-wt">
       <SearchFrom :searchData="pagination" @handleReset="handleReset" @handleSearch="searchProject" @handleClear="handleClear" :ref="formRef"></SearchFrom>
       <TableList :data="data" :pagination="pagination"  @onChange="onChange" @handleBulid="handleBulid" @handleEdit="handleEdit"
       @handle-click-delete="handleClickDelete" @handle-forbidden="handleForbidden"></TableList>
       <DialogForm  :visible="visible" :data="formBaseData" :title="title" @handleClose="handleClose" @handleAdd="handleAdd" @handleEdit="handleEditForm" ref="formRef"></DialogForm >
       <!-- 删除弹层 -->
       <Delete
      :visible="dialogDeleteVisible"
      :delete-text="operateText"
      @handle-delete="handleDelete"
      @handle-close="handleDeleteClose"
    ></Delete>
    <!-- end -->
    <!-- 禁用弹层 -->
    <Forbidden
      :visible="dialogVisible"
      :text="operateText"
      @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"
    ></Forbidden>
    <!-- end -->
   </div>
</template> 

<script lang="tsx" setup>
import { onMounted, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { getAllProjectList, getProjectDetails, getProjectList, projectAdd, projectDelete, projectStatus, projectUpdate } from '@/api/serve';
import TableList from "@/pages/serve/plan/project/components/TableList.vue";
import SearchFrom from "@/pages/serve/plan/project/components/SearchForm.vue";
import DialogForm from "@/pages/serve/plan/project/components/DialogForm.vue";
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'

const typeId = ref('') // 设置删除id
const typeStatus = ref(null) // 禁用启用
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const statusText = ref('') // 启用禁用提示
const operateText = ref('护理项目') // 要操作的内容提示


// 关闭删除弹层
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
// 确认删除
const handleDelete = async () => {
  const res: any = await projectDelete(typeId.value)
  // debugger
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    if(pagination.value.pageNum>1&&data.value.length===1){
       pagination.value.pageNum-=1
      }
    searchProject()
  }
  /* if(pagination.value.pageNum>1&&data.value.length===1){
       pagination.value.pageNum-=1
       searchProject()
      } */
}

const font=ref<boolean>(false)
// 点击删除
const handleClickDelete = async (val) => {
  // debugger

  
    typeId.value = val.id
  dialogDeleteVisible.value = true

  
}


// 禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}
// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res: any = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    searchProject()
  }
}
// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    searchProject()
    handleClose()
    formRef.value.handleClear()
  } 
}
//编辑
const handleEdit = (val) =>{
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}
 //是否显示弹窗
const visible = ref(false)
const formRef = ref(null)
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  title.value = '新增'
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}
// 添加
const handleAdd = async (val) => {
  const res = await projectAdd(val)
  // debugger
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    searchProject()
    handleClose()
    formRef.value.handleClear()
    
  } 
}
// 分页组件的参数 ,以及搜索条件的参数
const pagination =ref({
  pageNum:1,
  pageSize:10,
  total:100,
  name:'',
  status:''
})
// 当前页和每页大小发生变化时触发
const onChange= (pageInfo) => {
  MessagePlugin.success(`转到第${pageInfo.current}页`);
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  console.log(pageInfo);
  searchProject();
};
const data = ref([]);
// 搜素护理项目
const searchProject = async ()=>{
  let result=await getProjectList(pagination.value)
  console.log(result);
  if(result.code==200){
    pagination.value.total=result.data.total;
    data.value=result.data.records;
  }
}
//重置搜索框
const handleReset=()=>{
  ///清空搜索条件
 delete pagination.value.name
 delete pagination.value.status
 pagination.value={
    pageNum:1,
    pageSize:10,
    total:0
 }
  //重新查询
  searchProject()  
}

//清空
const  handleClear=(val)=>{
  //清空指定搜索条件
  if(val=='name'){
    delete pagination.value.name
  }else if(val=='status'){
    delete pagination.value.status
  }
 searchProject()
}

// 钩子函数
onMounted(async () => {
  searchProject(); 
})

</script>